<template>
  <div :style="styleName">
    <table
      :color="config.color"
      width="100%"
      border="0"
      cellspacing="0"
      border-collapse="collapse"
      :style="tableStyle"
    >
      <tr :style="thStyle">
        <th
          v-for="(item, index) in columns"
          :key="index"
          :width="item.width"
          :align="item.align"
          :style="{
            fontWeight: config.thFontWeight,
            border:
              config.borderSize <= 0
                ? ''
                : `${config.borderSize}pt ${config.borderLine} ${config.borderColor}`,
          }"
        >
          {{ item.label }}
        </th>
      </tr>
      <tr
        v-for="(row, index) in data"
        :key="index"
        :style="{ height: config.rowHeight + 'pt' }"
      >
        <td
          v-for="(item, i) in columns"
          :key="i"
          :align="item.align"
          :color="item.color"
          :style="tdStyle(item)"
        >
          {{ row[item.prop]}}
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  props: {
    config: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  computed: {
    styleName() {
      return {
        width: `${this.config.width}pt`,
        height: `${this.config.height}pt`,
        overflow: "hidden",
        opacity: this.config.opacity / 100,
      };
    },
    tableStyle() {
      return {
        fontFamily: this.config.fontFamily,
        color: this.config.color,
        backgroundColor:
          this.config.isBackgroundColor == "1" && this.config.backgroundColor
            ? this.config.backgroundColor
            : "rgba(0,0,0,0)",
        "border-collapse": "collapse",
        "border-spacing": "0",
      };
    },
    thStyle() {
      return {
        color: this.config.thColor,
       
        fontSize: this.config.thFontSize + "pt",
        height: this.config.thHeight + "pt",
        backgroundColor: this.config.thBackgroundColor
          ? this.config.thBackgroundColor
          : "rgba(0,0,0,0)",
      };
    },

    columns() {
      return this.config.columns;
    },
    data() {
      const row = {};
      this.columns.forEach((col)=>{
        row[col.prop ] = col.prop || ''
  
      })
      const res = this.config.data || [row];
      return res;
    },
  },
  data() {
    return {};
  },
  created() {},
  methods: {
    tdStyle(col) {
      return {
        color: col.color,
        fontWeight: col.fontWeight,
        fontSize: col.fontSize + "pt",
        backgroundColor: col.backgroundColor
          ? col.backgroundColor
          : "rgba(0,0,0,0)",
        border:
          this.config.borderSize <= 0
            ? ""
            : `${this.config.borderSize}pt ${this.config.borderLine} ${this.config.borderColor}`,
      };
    },
  },
};
</script>
